<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="aui-fullpage" *ngIf="!isOceanProtect">
    <div class="aui-header-1">
        <lv-group lvGutter='8px'>
            <h1>{{'common_log_management_label'|i18n}}</h1>
            <aui-multi-cluster-switch (onChange)="onChange()"></aui-multi-cluster-switch>
        </lv-group>
    </div>
    <div class="aui-block aui-gutter-column-md">
        <div class="aui-header-2">
            <h2>{{'system_debug_log_label'|i18n}}</h2>
        </div>
        <lv-form [formGroup]="debugLogFormGroup" class="aui-gutter-column-md">
            <lv-form-item>
                <lv-form-label>{{'system_log_level_label' | i18n}}</lv-form-label>
                <lv-form-control>
                    <lv-select class="form-control-input" formControlName="log_level" [lvOptions]='levelOptions' lvValueKey="value">
                    </lv-select>
                </lv-form-control>
            </lv-form-item>
        </lv-form>
        <lv-group [lvGutter]="'16px'" pmpermission pmOperation='SetLogLevel'>
            <button lv-button lvType='primary' (click)='ok()' [disabled]="debugLogFormGroup.invalid || debugLogDisable">
                {{ 'common_ok_label' | i18n }}
            </button>
            <button lv-button (click)='getDebugLog()' [disabled]="debugLogDisable">
                {{ 'common_cancel_label' | i18n }}
            </button>
        </lv-group>
    </div>

    <div class="aui-block">
        <div class="aui-header-2">
            <h2>{{headerLabel}}</h2>
        </div>
        <lv-alert lvType="info" [lvClosable]="false">
            {{ descLabel }}
          </lv-alert>
        <lv-form [formGroup]="exportLogFormGroup" class="form-width aui-gutter-column-md">
            <ng-container *ngIf="appUtilsService.isDistributed">
                <lv-form-item>
                    <lv-form-label lvRequired>{{'system_export_content_label' | i18n}}</lv-form-label>
                    <lv-form-control>
                        <lv-checkbox-group formControlName="type">
                            <lv-group [lvGutter]="'16px'">
                                <lv-checkbox [lvValue]="dataMap.Export_Query_Type.log.value">{{'system_log_file_label' | i18n}}</lv-checkbox>
                                <lv-checkbox [lvValue]="dataMap.Export_Query_Type.config.value">{{'system_config_file_label' | i18n}}</lv-checkbox>
                            </lv-group>
                        </lv-checkbox-group>
                    </lv-form-control>
                </lv-form-item>
            </ng-container>
            <lv-form-item>
                <lv-form-label>
                    {{'common_job_id_label' | i18n}}
                    <i lv-icon="aui-icon-help" [lv-tooltip]="idTipTpl" (mouseenter)="helpHover()"
                        class="configform-constraint" lvColorState='true'>
                    </i>
                    <ng-template #idTipTpl>
                        <span [innerHTML]="'protection_export_log_id_tips_label'|i18n"></span>
                    </ng-template>
                </lv-form-label>
                <lv-form-control [lvErrorTip]="customTimeRangeErrorTip">
                    <input lv-input type="text" formControlName="taskID"/>
                </lv-form-control>
            </lv-form-item>
            <lv-form-item *ngIf="(includes(exportLogFormGroup.value.type, dataMap.Export_Query_Type.log.value) || includes(exportLogFormGroup.value.type, dataMap.Export_Query_Type.config.value))">
                <lv-form-label lvRequired>{{'system_node_id_label' | i18n}}</lv-form-label>
                <lv-form-control>
                    <lv-select class="form-control-input" formControlName="nodeName" [lvOptions]='nodeNameOptions' lvValueKey="nodeName"
                        lvMode='multiple' lvShowCheckAll>
                    </lv-select>
                </lv-form-control>
            </lv-form-item>
            <ng-container *ngIf="includes(exportLogFormGroup.value.type, dataMap.Export_Query_Type.log.value)">
                <lv-form-item>
                    <lv-form-label lvRequired>
                        {{'system_sub_module_label' | i18n}}
                        <ng-container *ngIf="isCyberEngine">
                            <i lv-icon="aui-icon-help" [lv-tooltip]="logHelpTpl"
                                class="configform-constraint"></i>
                        </ng-container>
                    </lv-form-label>
                    <lv-form-control>
                        <lv-select class="form-control-input" formControlName="componentName" [lvOptions]='componentOptions' lvValueKey="value"
                            lvMode='multiple' lvShowCheckAll>
                        </lv-select>
                    </lv-form-control>
                </lv-form-item>
                <lv-form-item>
                    <lv-form-label lvRequired>
                        {{ 'insight_log_export_range_label' | i18n }}
                    </lv-form-label>
                    <lv-form-control>
                        <lv-select class="form-control-input" formControlName="exportTimeType" [lvOptions]="periodOptions" lvValueKey="value">
                        </lv-select>
                    </lv-form-control>
                </lv-form-item>
                <ng-container *ngIf="exportLogFormGroup.get('exportTimeType').value === dataMap.exportLogRange.customRange.value">
                    <lv-radio-group formControlName="selectTimeRangeType" class="mgb-8">
                        <lv-group [lvGutter]="'48px'">
                            <lv-radio [lvValue]="selectTimeRangeType.custom">{{ 'common_customize_label'|i18n }}</lv-radio>
                            <lv-radio [lvValue]="selectTimeRangeType.day">{{ 'common_specify_days_label'|i18n }}</lv-radio>
                        </lv-group>
                    </lv-radio-group>
                    <ng-container *ngIf="exportLogFormGroup.get('selectTimeRangeType').value === selectTimeRangeType.custom else specifyDayTpl">
                        <lv-form-item>
                            <lv-form-label></lv-form-label>
                            <lv-form-control [lvErrorTip]="customTimeRangeErrorTip">
                                <lv-date-range-picker formControlName="customRangeDate" [lvShowTime]="true"></lv-date-range-picker>
                            </lv-form-control>
                        </lv-form-item>
                    </ng-container>
                    <ng-template #specifyDayTpl>
                        <lv-form-item >
                            <lv-form-label></lv-form-label>
                            <lv-form-control [lvErrorTip]="customTimeRangeErrorTip">
                                <lv-group lvGutter="4px">
                                    <span class="text-no-wrap">{{'common_last_label'|i18n}}</span>
                                    <lv-input-group [lvAddAfter]="daysTpl">
                                        <input lv-input type='text' formControlName='specifyDay'>
                                    </lv-input-group>
                                </lv-group>
                                <ng-template #daysTpl>
                                    <div class="select-right-suffix">{{'common_days_label'|i18n}}</div>
                                </ng-template>
                            </lv-form-control>
                        </lv-form-item>
                    </ng-template>
                </ng-container>
                <lv-form-item>
                    <lv-form-label lvRequired>{{'system_log_file_name_label' | i18n}}</lv-form-label>
                    <lv-form-control [lvErrorTip]="nameErrorTip">
                        <input class="form-control-input" lv-input type='text' formControlName='logName'>
                    </lv-form-control>
                </lv-form-item>
            </ng-container>
            <ng-container *ngIf="appUtilsService.isDistributed && includes(exportLogFormGroup.value.type, dataMap.Export_Query_Type.config.value)">
                <lv-form-item>
                    <lv-form-label lvRequired>{{'system_config_file_name_label' | i18n}}</lv-form-label>
                    <lv-form-control [lvErrorTip]="nameErrorTip">
                        <input class="form-control-input" lv-input type='text' formControlName='configName'>
                    </lv-form-control>
                </lv-form-item>
            </ng-container>
        </lv-form>
        <button lv-button lvType='primary' (click)='export()' [disabled]="exportLogFormGroup.invalid">
            {{ 'common_export_label' | i18n }}
        </button>
    </div>
</div>

<ng-template #fileDownloadCompletedTpl>
    <div id="file-download-completed" [innerHTML]="fileDownloadCompletedLabel"></div>
</ng-template>
<ng-template #logHelpTpl>
    <span innerHTML="{{'system_sub_module_help_label' | i18n}}"></span>
</ng-template>

<div *ngIf="isOceanProtect && !isCyberEngine">
    <aui-multi-log></aui-multi-log>
</div>

<!--安全一体机23B不需要导出名称、导出范围，所以单独区分文件。24B需要放开此限制。-->
<div *ngIf="isCyberEngine">
    <aui-cyber-debug-log></aui-cyber-debug-log>
</div>
